<template>
  <div class="home">
    <img src="../assets/img/download.png" />
    <div class="middle">
      <img class="rotate" src="../assets/img/download-1.png" />
      <div class="red-packet-bg">
        <img src="../assets/img/download-2.png" />
        <div v-if="isCover" class="red-packet-cover">
          <img class="logo" src="../assets/img/download-4.jpg" />
          <div class="company">左键创想</div>
          <div class="congratulate">恭喜发财，大吉大利</div>
          <img
            class="open"
            @click="openRedPacket"
            src="../assets/img/download-5.png"
          />
        </div>
        <div v-if="!isCover" class="red-packet-content">
          <img class="avatar" src="../assets/img/wechat_avatar.png" />
          <div class="nick-name">羽化门掌教</div>
          <div class="amount">0.30元</div>
          <div class="congratulate">恭喜发财，大吉大利</div>
          <img
            class="accept"
            @click="inputForm"
            src="../assets/img/download-8.png"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="tip" @click="dialogVisible = true">活动说明</div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="calc(100% - 2rem)"
      top="25vh"
      modal-append-to-body="false"
    >
      <div class="activity-content">
        <img class="activity-tip" src="../assets/img/download-6.png" />
        <div class="text">
          <div class="title">活动有效期</div>
          <div class="desc">2020-03-17 16:11 至 2020-03-31 16:11</div>
          <div class="title">活动发行方</div>
          <div class="desc">左键创享</div>
        </div>
        <img
          class="close"
          @click="dialogVisible = false"
          src="../assets/img/download-7.png"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  data() {
    return {
      dialogVisible: false,
      isCover: true
    };
  },
  methods: {
    openRedPacket() {
      this.isCover = false;
    },
    inputForm() {
      this.$router.push({ path: "form" });
    }
  }
};
</script>
<style lang="scss">
body {
  background: #fff;
}
.home {
  width: 100%;
  height: 100vh;
  padding-top: 1.2rem;
  overflow: hidden;
  background: #f04e4f;
  img {
    width: 100%;
  }
  .middle {
    position: relative;
    .rotate {
      border-radius: 50%;
      animation: rotateImg 12s linear infinite;
    }
    .red-packet-bg {
      position: absolute;
      top: 5rem;
      width: 12rem;
      overflow: hidden;
      border-radius: 0.8rem;
      left: 50%;
      transform: translateX(-50%);
      .turn {
        transform: rotateY(90deg);
      }
      .red-packet-cover {
        position: absolute;
        top: 0;
        width: 100%;
        color: #ffe1bf;
        .logo {
          margin-top: 0.7rem;
          width: 3rem;
        }
        .company {
          margin-top: 0.3rem;
          font-weight: 700;
          font-size: 1rem;
        }
        .congratulate {
          margin-top: 1rem;
          font-weight: 600;
        }
        .open {
          width: 4rem;
          margin-top: 4.2rem;
        }
      }
      .red-packet-content {
        position: absolute;
        top: 0;
        width: 100%;
        color: #ffe1bf;
        animation: scaleDiv 0.8s ease-in-out 1;
        .avatar {
          margin-top: 0.7rem;
          width: 3rem;
          border-radius: 50%;
        }
        .nick-name {
          margin-top: 0.3rem;
          font-weight: 700;
          font-size: 1rem;
        }
        .amount {
          font-size: 2rem;
        }
        .accept {
          width: 4rem;
          margin-top: 2.2rem;
        }
      }
    }
    @keyframes scaleDiv {
      from {
        transform-origin: 50% 50%;
        transform: scale(0);
      }
      to {
        transform-origin: 50% 50%;
        transform: scale(1);
      }
    }

    @keyframes rotateImg {
      from {
        transform-origin: 50% 50%;
        transform: rotate(0deg);
      }
      to {
        transform-origin: 50% 50%;
        transform: rotate(360deg);
      }
    }
  }
  .bottom {
    margin-top: 2rem;
    color: #fff;
    font-size: 0.4rem;
  }
  /deep/ .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog__headerbtn {
      display: none;
    }
  }
  .activity-content {
    position: relative;
    .activity-tip {
      position: absolute;
      top: -9.5rem;
      left: 50%;
      width: 30rem;
      transform: translateX(-50%);
    }
    .text {
      font-size: 1rem;
      .title {
        font-weight: 600;
      }
      .desc {
        margin-bottom: 0.2rem;
      }
    }
    .close {
      position: absolute;
      bottom: -7rem;
      width: 3rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
